"use client"

import { useState, useEffect } from "react"
import { useRouter, useParams } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Textarea } from "@/components/ui/textarea"
import {
  ArrowLeft,
  Clock,
  Eye,
  Heart,
  MessageSquare,
  Share2,
  Bookmark,
  User,
  Award,
  DollarSign,
  FileText,
  ThumbsUp,
  Send,
} from "lucide-react"

export default function NewsDetailPage() {
  const router = useRouter()
  const params = useParams()
  const [liked, setLiked] = useState(false)
  const [bookmarked, setBookmarked] = useState(false)
  const [comment, setComment] = useState("")
  const [comments, setComments] = useState([])

  // 模拟新闻数据
  const newsData = {
    hot_001: {
      id: "hot_001",
      type: "success_story",
      title: "90后小伙开奶茶店3年开了200家分店，年营收破亿的秘诀",
      summary: "从一家10平米小店到200家连锁，他是如何在竞争激烈的奶茶市场杀出重围的？",
      content: `
        <h2>从10平米小店到200家连锁的创业传奇</h2>
        
        <p>在竞争激烈的奶茶市场，90后创业者李明用3年时间将一家10平米的小店发展成拥有200家分店的连锁品牌，年营收突破1亿元。他的成功秘诀是什么？</p>
        
        <h3>1. 产品差异化定位</h3>
        <p>李明发现市场上的奶茶同质化严重，于是专注于健康茶饮概念，使用真茶叶和天然配料，避开价格战的红海竞争。</p>
        
        <h3>2. 标准化运营体系</h3>
        <p>从第5家店开始，李明就建立了完整的标准化运营体系，包括：</p>
        <ul>
          <li>统一的产品配方和制作流程</li>
          <li>标准化的店面装修和布局</li>
          <li>完善的员工培训体系</li>
          <li>数字化的管理系统</li>
        </ul>
        
        <h3>3. 精准的选址策略</h3>
        <p>李明总结出"三高一低"的选址原则：人流量高、消费能力高、年轻人比例高、租金相对较低。</p>
        
        <h3>4. 数字化营销</h3>
        <p>通过小程序、社群营销、KOL合作等方式，建立了完整的私域流量体系，客户复购率达到60%以上。</p>
        
        <h3>5. 供应链优化</h3>
        <p>与上游供应商建立深度合作关系，通过规模采购降低成本，同时保证产品质量的稳定性。</p>
        
        <p>李明表示："创业不是一蹴而就的，需要在每个环节都做到极致，才能在激烈的竞争中脱颖而出。"</p>
      `,
      author: "创业邦记者",
      publishTime: "2024-01-15 10:30",
      readTime: "8分钟",
      views: 15420,
      likes: 1205,
      comments: 89,
      bookmarks: 234,
      tags: ["创业故事", "连锁经营", "奶茶行业", "标准化运营"],
      category: "startup",
      priority: "high",
    },
    hot_002: {
      id: "hot_002",
      type: "funding_news",
      title: "AI教育赛道再获资本青睐，3家公司单月融资超10亿",
      summary: "人工智能+教育成为投资新热点，个性化学习、智能辅导等细分领域受到关注",
      content: `
        <h2>AI教育赛道迎来融资热潮</h2>
        
        <p>2024年1月，AI教育赛道表现亮眼，3家公司在单月内完成融资总额超过10亿元人民币，显示出资本市场对AI教育领域的强烈看好。</p>
        
        <h3>融资详情</h3>
        <ul>
          <li><strong>智学AI</strong>：完成5亿元B轮融资，由红杉中国领投</li>
          <li><strong>个性化学习平台EduSmart</strong>：获得3亿元A+轮融资</li>
          <li><strong>AI辅导助手TutorBot</strong>：完成2.5亿元A轮融资</li>
        </ul>
        
        <h3>投资热点分析</h3>
        <p>投资机构普遍看好以下几个方向：</p>
        <ul>
          <li>个性化学习路径规划</li>
          <li>智能作业批改和反馈</li>
          <li>AI驱动的在线辅导</li>
          <li>教育内容智能生成</li>
        </ul>
        
        <h3>市场前景</h3>
        <p>据艾瑞咨询数据显示，中国AI教育市场规模预计在2025年将达到3000亿元，年复合增长率超过30%。</p>
      `,
      author: "投资界",
      publishTime: "2024-01-15 14:20",
      readTime: "10分钟",
      views: 8930,
      likes: 892,
      comments: 67,
      bookmarks: 156,
      tags: ["AI教育", "投融资", "在线教育", "人工智能"],
      category: "funding",
      priority: "high",
    },
    hot_003: {
      id: "hot_003",
      type: "policy_analysis",
      title: "2024年创业扶持政策解读：税收优惠力度加大",
      summary: "新政策为初创企业提供更多支持，包括税收减免、资金补贴等多项措施",
      content: `
        <h2>2024年创业扶持政策全面升级</h2>
        
        <p>国家发改委、财政部等多部门联合发布2024年创业扶持政策，为初创企业提供更大力度的支持。</p>
        
        <h3>主要政策亮点</h3>
        
        <h4>1. 税收优惠政策</h4>
        <ul>
          <li>小微企业所得税减免比例提高至50%</li>
          <li>研发费用加计扣除比例提升至200%</li>
          <li>高新技术企业认定门槛降低</li>
        </ul>
        
        <h4>2. 资金支持政策</h4>
        <ul>
          <li>创业担保贷款额度提高至500万元</li>
          <li>政府引导基金规模扩大至1000亿元</li>
          <li>设立专项创业补贴基金</li>
        </ul>
        
        <h4>3. 人才引进政策</h4>
        <ul>
          <li>海外人才创业绿色通道</li>
          <li>高校毕业生创业补贴</li>
          <li>技能人才培训支持</li>
        </ul>
        
        <h3>申请条件和流程</h3>
        <p>符合条件的企业可通过各地政务服务平台在线申请，审批时间缩短至15个工作日内。</p>
      `,
      author: "政策解读专家",
      publishTime: "2024-01-15 09:15",
      readTime: "6分钟",
      views: 6543,
      likes: 543,
      comments: 34,
      bookmarks: 89,
      tags: ["政策解读", "税收优惠", "创业扶持", "小微企业"],
      category: "policy",
      priority: "medium",
    },
  }

  const currentNews = newsData[params.id] || newsData.hot_001

  useEffect(() => {
    // 模拟评论数据
    setComments([
      {
        id: 1,
        user: "创业小白",
        avatar: "/placeholder.svg?height=32&width=32",
        content: "很有启发性的文章，学到了很多实用的经验！",
        time: "2小时前",
        likes: 12,
      },
      {
        id: 2,
        user: "奶茶店老板",
        avatar: "/placeholder.svg?height=32&width=32",
        content: "标准化运营确实很重要，我们店也在朝这个方向努力",
        time: "4小时前",
        likes: 8,
      },
      {
        id: 3,
        user: "投资人张总",
        avatar: "/placeholder.svg?height=32&width=32",
        content: "这个案例很典型，供应链优化是连锁经营的关键",
        time: "6小时前",
        likes: 15,
      },
    ])
  }, [])

  const handleLike = () => {
    setLiked(!liked)
  }

  const handleBookmark = () => {
    setBookmarked(!bookmarked)
  }

  const handleShare = () => {
    // 分享功能
    console.log("分享文章")
  }

  const handleComment = () => {
    if (comment.trim()) {
      const newComment = {
        id: comments.length + 1,
        user: "当前用户",
        avatar: "/placeholder.svg?height=32&width=32",
        content: comment,
        time: "刚刚",
        likes: 0,
      }
      setComments([newComment, ...comments])
      setComment("")
    }
  }

  const getTypeIcon = (type) => {
    switch (type) {
      case "success_story":
        return <Award className="w-4 h-4" />
      case "funding_news":
        return <DollarSign className="w-4 h-4" />
      case "policy_analysis":
        return <FileText className="w-4 h-4" />
      default:
        return <FileText className="w-4 h-4" />
    }
  }

  const getTypeName = (type) => {
    switch (type) {
      case "success_story":
        return "成功案例"
      case "funding_news":
        return "投融资"
      case "policy_analysis":
        return "政策解读"
      default:
        return "资讯"
    }
  }

  const getTypeColor = (type) => {
    switch (type) {
      case "success_story":
        return "bg-green-100 text-green-700"
      case "funding_news":
        return "bg-blue-100 text-blue-700"
      case "policy_analysis":
        return "bg-purple-100 text-purple-700"
      default:
        return "bg-slate-100 text-slate-700"
    }
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-purple-50/30">
      {/* 顶部导航 */}
      <header className="bg-white/80 backdrop-blur-xl border-b border-slate-200/50 sticky top-0 z-50">
        <div className="max-w-4xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <Button variant="ghost" size="sm" onClick={() => router.back()}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              返回
            </Button>
            <div className="flex items-center space-x-2">
              <Button variant="ghost" size="sm" onClick={handleLike} className={liked ? "text-red-600" : ""}>
                <Heart className={`w-4 h-4 mr-1 ${liked ? "fill-current" : ""}`} />
                {currentNews.likes + (liked ? 1 : 0)}
              </Button>
              <Button
                variant="ghost"
                size="sm"
                onClick={handleBookmark}
                className={bookmarked ? "text-yellow-600" : ""}
              >
                <Bookmark className={`w-4 h-4 mr-1 ${bookmarked ? "fill-current" : ""}`} />
                {currentNews.bookmarks + (bookmarked ? 1 : 0)}
              </Button>
              <Button variant="ghost" size="sm" onClick={handleShare}>
                <Share2 className="w-4 h-4 mr-1" />
                分享
              </Button>
            </div>
          </div>
        </div>
      </header>

      <main className="max-w-4xl mx-auto px-6 py-8">
        {/* 文章头部 */}
        <div className="mb-8">
          <div className="flex items-center space-x-2 mb-4">
            <Badge className={getTypeColor(currentNews.type)}>
              {getTypeIcon(currentNews.type)}
              <span className="ml-1">{getTypeName(currentNews.type)}</span>
            </Badge>
            <Badge variant="outline">{currentNews.readTime}</Badge>
          </div>

          <h1 className="text-3xl font-bold text-slate-900 mb-4 leading-tight">{currentNews.title}</h1>

          <div className="flex items-center justify-between text-sm text-slate-600 mb-6">
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-1">
                <User className="w-4 h-4" />
                <span>{currentNews.author}</span>
              </div>
              <div className="flex items-center space-x-1">
                <Clock className="w-4 h-4" />
                <span>{currentNews.publishTime}</span>
              </div>
            </div>
            <div className="flex items-center space-x-4">
              <div className="flex items-center space-x-1">
                <Eye className="w-4 h-4" />
                <span>{currentNews.views}</span>
              </div>
              <div className="flex items-center space-x-1">
                <MessageSquare className="w-4 h-4" />
                <span>{currentNews.comments}</span>
              </div>
            </div>
          </div>

          <div className="flex flex-wrap gap-2 mb-6">
            {currentNews.tags.map((tag, index) => (
              <Badge key={index} variant="outline" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        </div>

        {/* 文章内容 */}
        <Card className="mb-8">
          <CardContent className="p-8">
            <div className="prose prose-slate max-w-none" dangerouslySetInnerHTML={{ __html: currentNews.content }} />
          </CardContent>
        </Card>

        {/* 评论区 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center space-x-2">
              <MessageSquare className="w-5 h-5" />
              <span>评论 ({comments.length})</span>
            </CardTitle>
          </CardHeader>
          <CardContent>
            {/* 发表评论 */}
            <div className="mb-6">
              <Textarea
                placeholder="写下你的想法..."
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                className="mb-3"
                rows={3}
              />
              <div className="flex justify-end">
                <Button onClick={handleComment} disabled={!comment.trim()}>
                  <Send className="w-4 h-4 mr-2" />
                  发表评论
                </Button>
              </div>
            </div>

            {/* 评论列表 */}
            <div className="space-y-4">
              {comments.map((comment) => (
                <div key={comment.id} className="flex space-x-3 p-4 bg-slate-50 rounded-lg">
                  <img src={comment.avatar || "/placeholder.svg"} alt={comment.user} className="w-8 h-8 rounded-full" />
                  <div className="flex-1">
                    <div className="flex items-center space-x-2 mb-1">
                      <span className="font-medium text-slate-900">{comment.user}</span>
                      <span className="text-xs text-slate-500">{comment.time}</span>
                    </div>
                    <p className="text-slate-700 mb-2">{comment.content}</p>
                    <Button variant="ghost" size="sm" className="text-slate-500 hover:text-slate-700">
                      <ThumbsUp className="w-3 h-3 mr-1" />
                      {comment.likes}
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </main>
    </div>
  )
}
